» Fuente: elwebmaster
Wallpapers » 2desktop |
|
▼ |
Recuperar un blog eliminado |
|
▼ |
Problemas, soluciones y alternativas con los scripts |
|
▼ |
Y lo parece, pero si estos días habéis visitado a J.Miur veréis que ofrece varias alternativas, hace tiempo que ya nos hablaba sobre el tema y aquella entrada da la sensación ahora de ser una premonición pero nada más lejos, aquella explicación es fruto de la experiencia y de este largo peregrinar con archivos de un sitio a otro.
La alternativa que ofrece es la de alojar los archivos en la misma plantilla, hablamos de scripts, archivos .js y css.
Una vez copiado el contenido del archivo nos situamos en plantilla edición de HTML y antes de </head> añadimos lo siguiente:
<script type='text/javascript'>
//<![CDATA[
// AQUÍ PONEMOS EL NOMBRE DEL ARCHIVO
y aquí pegamos lo que copiamos del bloc de notas
..................
..................
..................
al final añadimos lo siguiente:
//]]>
</script>
Los archivos CSS más de lo mismo, añadimos:
<style type='text/css'>
aquí incluimos el contenido
</style>
» NKR está utilizando GooglepPages (Hay que tener precaución ya que avisaron con tiempo que cerraría)
» Rô proporciona JavaScript Host y nos explica con detalle en su blog. (Hasta ahora es el que más me convence)
» Guille Angulo se suma a GooglePages
» Doc.C@ble nos trae Geocites
» Jose opina que JavaScript Host funciona sin problemas.
» Fabiana se suma a JavaScript Host
» Squirrel nos comenta sobre JavaScript Host, Boxstr, FileDen y FileFactory
» Henry coincide con JavaScript Host y FileDen.
» BanakaBanaka nos hace una entrega cuyo aporte es alojar los archivos en GoogleSites.
Bueno, lo dejamos en grandes soluciones.
Problemas muy familiares |
|
▼ |
Si encontráis algo que no funcione correctamente agradecería mucho un comentario.
Pho.to » Herramientas varias para imágenes |
|
▼ |
Pho.to es una página a las que yo llamo de entretenimiento, no se trata de un potente editor de imágenes sino de un sitio que proporciona distintas herramientas de forma independiente. La más conocida es Makeup Pho.to entenderán por qué cuando lean lo que esa herramienta hace.
¡Haga que la persona que aparece en su foto parezca modelo de una revista glamorosa! Coloque maquillaje sobre los ojos y la piel, blanquee los dientes, quite las imperfecciones y dé a su foto un toque especial con un efecto de enfoque suave. Todas las mejoras se realizan automáticamente, solo cargue la foto y ¡disfrute de este cambio mágico!
Si nos registramos también podemos crear Flash slideshows,albums3D ,galleries 3D... Lo que yo decía, un sitio para entretenerse.
La etiqueta span y los estilos |
|
▼ |
<span style=";font-family:comic sans ms;color:orangered;" >Soy fuente comic y color orangered </span>
Soy fuente comic,color orangered y de mayor tamaño
<span style=";font-family:comic sans ms;font-size:16px;color:orangered;" >Soy fuente comic,color orangered y de mayor tamaño </span>
.span{
color: orangered;
font-family: comic sans ms;
font-size: 16px;
}
Guardamos los cambios y hacemos la prueba en una entrada:
<span class="span">Aquí añadimos cualquier texto</span>
El juego con la etiqueta span puede ser tan divertido como nosotros estemos dispuestos a que lo sea.
Añadimos dos clases una para cada color y a cada una de esas clases le añadimos estilos.
.color-rojo {
color:#940f04;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro {
color:#000;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
Podemos continuar añadiendo un efecto hover donde el color de la fuente se invierta
.color-rojo:hover {
color:#000;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro:hover {
color: #940f04;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
Podemos seguir jugando pero será otro día
Photivisi crear collages |
|
▼ |
Se llama Photivisi y es un sitio donde podemos crear collages con nuestras propias imágenes en 18 modelos distintos, estos son algunos.
Más opciones sobre la fecha |
|
▼ |
Últimamente vengo observando un detalle en algunas plantillas, se trata de la fecha tipo calendario que aplicamos hace tiempo al blog.
Pero el detalle no es la fecha es el lugar donde ubicamos la fecha, la situamos en el borde del blog, más exactamente en la línea de outer-wrapper.
¿Cómo hacerlo?
Lo primero de todo es configurar la fecha, nos dirigimos a Configuración | Formato | Formato de cabecera de fecha y escogemos la opción como la imagen siguiente.
Una vez tenemos la fecha establecida nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla, buscamos:
<h2 class='date-header'><data:post.dateHeader/></h2>y lo sustituimos por
Ahora ubicamos la etiqueta </head> justo antes añadimos el script.
Más arriba buscamos ]]></b:skin> y siempre justo antes añadimos los estilos de la fecha para el día y el mes.
Donde url-imagen podemos añadir una imagen, o si lo preferimos un color de fondo con background-color:#000; si el fondo queda demasiado grande podemos reducirlo en #fecha cambiando la altura (height) y anchura (width)
¿Queda muy separado o demasiado pegado a las entradas? lo podemos mover en margin aumentando o disminuyendo margin:0 0 -60px -80px;
Si miramos en vista previa podría ser que aún no veamos la fecha ¿Por qué si lo hice todo bien? nos falta un último detalle y es ubicar #main-wrapper seguramente tienes añadido lo siguiente:
También puede ser lo siguiente que viene a ser lo mismo.
Es necesario eliminar esas propiedades, sin embargo la propiedad overflow: hidden; tiene una función importante, impide que un contenido demasiado grande se extienda fuera del bloque, lo vimos en algún blog que el texto o cualquier imagen no respeta el espacio del contenido y sale de su sitio.
Lo que haremos será suprimir esas propiedades de main-wrapper y añadirlas en los estilos del post de esa forma hará la misma función de evitar que se desborde cualquier contenido en las entradas.
Ahora si tenemos nuestra fecha bien visible.
Cambiar estilos y otras historias |
|
▼ |
Hace tiempo tratamos sobre el tema cambiar estilos, es muy fácil de conseguir ese efecto sin embargo siempre digo que la imaginación es lo que cuenta y sin duda este es un ejemplo.
Lógicamente esa es una página creada por profesionales donde el resultado es espectacular yo diría que magistral porque combina perfectamente un diseño actual con elegancia y buen gusto.
Como siempre que me gusta algo la página quedó guardada hasta hace unos días que probando a añadir una imagen de fondo a unas transparencias pensé ¿por qué no añadirle unos cambios de estilo? los pasos a seguir son los mismos que los utilizados en cambiar estilos la diferencia está que en lugar de cambiar el color de fondo cambiamos los estilos de los colores utilizados.
DrPic - Editor online de imágenes |
|
▼ |
DrPic es un ditor de imágenes online, las funciones que presenta son muy básicas y por lo tanto muy sencillo de utilizar. La opción de reducir imágenes me ha llamado mucho la atención porque la imagen no pierde tanta calidad como en otros editores.
Veamos un ejemplo...
Iconos RSS tema música. |
|
▼ |
Estos bonitos iconos RSS los podemos encontrar en The Theme Blog ideales para los amantes de la música.
El tamaño es de 100x100 y se presentan en formato PNG. Los colores son como los de la muestra naranja, rojo y blanco-negro.
Fecha en todos los post |
|
▼ |
Como todos sabemos cuando actualizamos varias veces el mismo día ocurre que la fecha sólo aparece en la primera entrada, en el resto no veremos fecha.
J.Miur nos explica con todo detalle como conseguir que nuestras entradas aparezcan todas con fecha.
Las indicaciones son sencillas pero aún así recomiendo leer su entrada porque estoy segura que con ella entenderemos como maneja Blogger las fechas.
Nos situamos en plantilla Edición de HTML y marcamos para expandir la plantilla.Buscamos:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Y lo sustituimos por:
<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
A partir de ahí todos nuestros post contendrán la fecha.
Ampliar imágenes con expando.js |
|
▼ |
<script src='aquí-url-del-script' type='text/javascript'/>
Hay otra opción y es añadir el script directamente a la plantilla, de esa forma evitaremos que el archivo deje de funcionar por problemas de alojamiento como puede ser superar la banda ancha o caídas del servidor. En este caso lo añadiremos también antes de </head> de esta forma:
<script type='text/javascript'>
//<![CDATA[
// Expando
/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>
img.expando{
border: none;
vertical-align: top;
}
.post img {
aquí estarán los estilos
que podemos copiar y pegar
}
Para el ejemplo añadí:
img.expando{
background:#EFEFEF;
padding:8px;
border:2px outset #F6FAF4;
vertical-align: top;
}
<img class="expando" src="url-de-la-imagen" width="100" border="0" height="100" />
Si deseamos añadir un grupo de imágenes:
<p><img class="expando nombre-imagen" border="0" src="url-imagen-1" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-2" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-3" width="100" height="100"></p>
Resumen en todos los post |
|
▼ |
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
"Cualquier cambio que hagamos sólo afectará la imagen que mostramos en los post resumidos, es decir la miniatura, una vez visualizamos el post completo la imagen se muestra en el tamaño y ubicación escogida por nosotros"
Buscamos ahora lo siguiente:
Y lo sustituimos por:
»También podemos añadir una imagen en lugar del texto si añadimos:
» Si deseamos añadir unos estilos a ese texto podemos hacerlo con la etiqueta span.
<span style='color:#000;font-size:14px;'> Texto para expandir el post</span>
Ahí mismo podemos modificar el color de letra, tamaño y fondo.
El resultado de estas explicaciones podéis verlo aquí.